---
title: 批注
icon: PencilLine
---

<MetaData
  lang="zh-CN"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-note',
      locale: '@univerjs/preset-sheets-note/locales/zh-CN',
      style: '@univerjs/preset-sheets-note/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/sheets-note',
      facade: '@univerjs/sheets-note/facade',
    }, {
      client: '@univerjs/sheets-note-ui',
      locale: '@univerjs/sheets-note-ui/locale/zh-CN',
      style: '@univerjs/sheets-note-ui/lib/index.css',
    }],
    server: '否',
  }}
/>

批注功能允许用户在电子表格的单元格中添加注释，以便记录额外信息或提供上下文。它支持多种注释样式和操作，帮助用户更好地理解和协作处理数据。

<PlaygroundFrame lang="zh-CN" slug="sheets/notes" clickToShow />

## 预设模式

### 安装

```package-install
npm install @univerjs/preset-sheets-note
```

### 使用

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
import { UniverSheetsNotePreset } from '@univerjs/preset-sheets-note' // [!code ++]
import UniverPresetSheetsNoteZhCN from '@univerjs/preset-sheets-note/locales/zh-CN' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-note/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsNoteZhCN, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsNotePreset(), // [!code ++]
  ],
})
```

{/* ### 预设与配置 */}

## 插件模式

### 安装

```package-install
npm install @univerjs/sheets-note @univerjs/sheets-note-ui
```

### 使用

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsNotePlugin } from '@univerjs/sheets-note' // [!code ++]
import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui' // [!code ++]
import SheetsNoteUIZhCN from '@univerjs/sheets-note-ui/locale/zh-CN' // [!code ++]

import '@univerjs/sheets-note-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-note/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: mergeLocales(
      SheetsNoteUIZhCN, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverSheetsNotePlugin) // [!code ++]
univer.registerPlugin(UniverSheetsNoteUIPlugin) // [!code ++]
```

{/* ### 插件与配置 */}

## Facade API

完整 Facade API 类型定义，请查看 [FacadeAPI](https://reference.univer.ai/zh-CN)。

### 获取批注

`FWorksheet.getNotes`：获取工作表的所有批注

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

notes.forEach((item) => {
  const { row, col, note } = item
  console.log(`单元格 ${fWorksheet.getRange(row, col).getA1Notation()} 的批注为: ${note}`)
})
```

`FRange.getNote`：获取范围内左上角单元格的批注

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1:D10')
const note = fRange.getNote()
```

### 添加或更新批注

`FRange.createOrUpdateNote`：创建或更新范围内左上角单元格的批注

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const fRange = fWorksheet.getRange('A1')
fRange.createOrUpdateNote({
  note: '这是一个批注',
  width: 160,
  height: 100,
  show: true,
})
```

### 删除批注

`FRange.deleteNote`：删除范围内左上角单元格的批注

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const notes = fWorksheet.getNotes()

if (notes.length > 0) {
  // 删除工作表中第一个批注
  const { row, col } = notes[0]
  fWorksheet.getRange(row, col).deleteNote()
}

// 删除 C1 单元格批注
const fRange = fWorksheet.getRange('C1')
fRange.deleteNote()
```

### 事件监听

完整事件类型定义，请查看 [Events](https://reference.univer.ai/zh-CN/classes/FEventName)。

| 事件名称 | 说明 |
| -------- | ---- |
| `SheetNoteAdd` | 添加批注后触发 |
| `SheetNoteDelete` | 删除批注后触发 |
| `SheetNoteUpdate` | 更新批注后触发 |
| `SheetNoteShow` | 显示批注时触发 |
| `SheetNoteHide` | 隐藏批注时触发 |
| `BeforeSheetNoteAdd` | 添加批注前触发 |
| `BeforeSheetNoteDelete` | 删除批注前触发 |
| `BeforeSheetNoteUpdate` | 更新批注前触发 |
| `BeforeSheetNoteShow` | 显示批注前触发 |
| `BeforeSheetNoteHide` | 隐藏批注前触发 |

#### 事件监听示例

```typescript
// 添加批注后事件
const disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {
  const { workbook, worksheet, row, col, note } = params
})

// 移除事件监听，使用 `disposable.dispose()`
```

```typescript
// 删除批注前事件，可取消
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {
  const { workbook, worksheet, row, col, oldNote } = params

  // 取消批注删除操作
  params.cancel = true
})

// 移除事件监听，使用 `disposable.dispose()`
```
